<template>
   <div class="classcenter">
     <Home_header :settings="config.setting"  :showtop="false"></Home_header>
     <div class="main_classcenter">
         <div v-for="(item,index) in headerBanner.data" class="banners">
             <a :href="item.link" target="_blank">
                 <img :src="item.image" alt="">
             </a>
         </div>
     </div>
     <div class="article_shop_new">
    <div class="width_all current-location">
			<p class="width_main">位置：
        <nuxt-link to="/">华章官网</nuxt-link>&gt;
        <nuxt-link to="/classcenter" style="color: #75ad70">课程中心</nuxt-link>
      </p>
		</div>
        <div class="xinwen_con">
            <div class="biao_con">
                <h2>华章培训课程</h2>
            </div>
            <div class="mianshi_li">
                <div class="li_ccx clearfix">
                    <div v-for="item in list" class="li_box">
                        <nuxt-link :to="{path:'classcenter/detail',query:{id:item.id}}">
                            <div class="img_box">
                                <div class="meng_con">
                                    <span>课程价格：{{item.price}}</span>
                                    <span>人气：{{item.hots}}</span>
                                </div>
                                <img :src="item.image" alt="">
                            </div>
                            <div class="title">
                                <p>{{item.name}}</p>
                            </div>
                        </nuxt-link>
                    </div>
                </div>
            </div>
             <div class="biao_con">
                <h2>华章八大优势</h2>
            </div>
            <div  class="youshi_con">
                <div v-for=" (item,index) in eightY" class="youzhi_lii">
                    <span>{{index+1}}</span>
                    <span>{{item}}</span>
                </div>
            </div>
              <div class="biao_con">
                <h2>华章师资团队</h2>
            </div>
            <div class="Introduction">
                <div class="Introduction_lefy">
                    <img src="../../assets/img/4281-1zq20z300n2.jpg" alt="">
                </div>
                <div class="Introduction_right">
                    <p>华章于2001年开办管理类硕士联考培训，华章全国49家分校，多年来以“专业教学研究+精确把握考点信息+精选全国名师+联考高通过率”等优势闻名，被誉为管理类联考培训中的“黄埔军校”。 华章全国名师团队多为教材编写者，连续17年从事高教版管理类硕士联考辅导教材编写工作，以该系列教材作者为班底的名师团队，为雄松华章及全国各地49家分支机构打造出含金量高的培训课程。 他们都是管理类联考培训界具有代表性的人物，其中袁进、许明、王帅、顾越、孙勇等各科全国名师多年坐镇华章。</p>
                </div>
            </div>
<!--            <div class="xiangguan">-->
<!--                <p>相关课程</p>-->
<!--            </div>-->
<!--            <div class="quancheng_con">-->
<!--                <div v-for=" n in 4" class="qc_lis">-->
<!--                    <div class="qc_left">-->
<!--                        <img src="../../assets/img/5d5ce449aa4f8.jpg" alt="">-->
<!--                    </div>-->
<!--                    <div class="zhaosheng_p">-->
<!--                        <p>广州华章MBA全程班招生</p>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
            <div class="xuanfu_con">
                <p>申请试听课程</p>
                <i></i>
                <span>只要一个电话<br>我们免费为您回电</span>
                <input v-model="name" type="text" name="name" id="names" placeholder="输入您的姓名">
                <input v-model="phone" type="text" name="mobile" id="mobiles"  placeholder="请输入手机号">
                <input style="text-align: center" @click="freebtn(name,phone)" value="申请试听" id="sub2">
            </div>
        </div>
     </div>
   </div>
</template>

<script>
    import Home_header from '../../components/Home-header'

    export default {
        name: 'classcenter',
        components: {
            Home_header,
        },
        async asyncData({app}){
            //更多类型
            let config = await app.$apiconfig();
            //banner
            let headerBanner = await app.$apiGet('banners', {cate_id: 21})
            return {
                headerBanner,
                config,
                eightY:['华章MBA全国49家分校',' 提供个性化辅导方案',' 自创四轮三阶段教学战略','院校关系合作紧密',' 华章名师出版配套教材','教学团队实力强大',' 老学员好口碑','全程跟踪课程进度'],
            }
        },
        head() {
            return this.config.header;
        },
        data(){
            return{
                list:'',
                phone:'',
                name:'',
            }
        },
        created() {
        this.courselist_init();
        },
        methods:{
            freebtn(n, p) {
                if (!n) {
                    this.$message.error('请输入姓名');
                    return false
                }
                if (!(/^1[3456789]\d{9}$/.test(p))) {
                    this.$message.error('请输入正确的手机号码');
                    return false
                }
                console.log(n, p)
                this.$apiPost('addsignlog', {
                    type_id: 4,
                    name: n,
                    phone: p,
                }).then(res => {
                    console.log(res)
                    if (res.code == 1) {
                        this.$message.success('提交成功')
                    } else {
                        this.$message.error(res.msg)
                    }
                })
            },
            courselist_init(page){
                this.$apiGet("hotcourses", {
                    page: 1,
                    limit: 10000,
                }).then(res=>{
                    console.log(res)
                    this.list = res.data;
                });
            },
        }
    }
</script>

<style scoped>
.xuanfu_con #sub2 {
    background-color: #f2445d;
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    color: #FFFFFF;
    border-radius: 5px;
    cursor: pointer;
    border: 0px solid #fff;
}
.xuanfu_con #mobiles {
    background-color: #FFFFFF;
    box-sizing: border-box;
    height: auto;
    line-height: 40px;
    padding-left: 20px;
    width: 100%;
    border-radius: 5px;
    margin-top: 14px;
    margin-bottom: 14px;
    border: 0px solid #fff;
}
.xuanfu_con #names {
    background-color: #FFFFFF;
    height: auto;
    line-height: 40px;
    padding-left: 20px;
    width: 100%;
    box-sizing: border-box;
    border: 0px solid #fff;
    border-radius: 5px;
}
.xuanfu_con span {
    text-align: center;
    font-size: 14px;
    color: #b4b9c1;
    line-height: 30px;
    margin-bottom: 20px;
    display: inline-block;
    width: 100%;
}
.xuanfu_con i {
    display: block;
    width: 20px;
    height: 4px;
    background-color: #f2445d;
    margin: 20px auto;
}
.xuanfu_con p {
    display: block;
    text-align: center;
    font-size: 26px;
    color: #FFFFFF;
}
.xuanfu_con {
    position: absolute;
    right: 0px;
    top: 0px;
    width:250px;
    height: 368px;
    padding: 20px 15px;
    background: url(../../assets/img/ly_bg.jpg)no-repeat;
    box-sizing: border-box;
}
.zhaosheng_p p {
        padding: 8px;
    width: 100%;
    font-size: 16px;
    padding: 8px;
    color:#000;
}
.zhaosheng_p {
    width: 100%;
}
.quancheng_con {
    width: 898px;
}
.qc_left img {
    width: 100%;
}
.qc_left {
    width:100%;
}
.qc_lis:hover p {
    cursor: pointer;
    color: #068BF2;
}
.qc_lis:nth-child(4n+4){
    margin-right: 0px;
}
.qc_lis {
    cursor: pointer;
    width:24%;
    display: inline-block;
    margin-right: 10px;
}
.xiangguan p {
    display: block;
    width: 100%;
    padding-bottom: 8px;
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: bold;
    border-bottom: 1px solid #dfe2e9;
}
.xiangguan::after {
    content: '';
    width: 79px;
    height: 3px;
    background-color: #ff0505;
    position: absolute;
    top: 34px;
    left: 0;
}
.xiangguan {
    position: relative;
    width: 898px;
    text-align: left;
}
.Introduction_right {
    width: 50%;
}
.Introduction_right p {
    text-indent: 2em;
    line-height: 26px;
    font-size: 16px;
    padding: 0px 20px 20px;
    box-sizing: border-box;
    color: #000;
}
.Introduction_lefy img {
    width: 100%;
}
.Introduction_lefy {
    width:50%;
}
.Introduction {
    width:898px;
    display: flex;
    margin-top:20px;
}
.youzhi_lii span {
    display: inline-block;
    font-size: 16px;
    color: #0084ff;

}
.youzhi_lii:hover span {
    color: #FFFFFF;
}
.youzhi_lii:hover {
    background-color: #134a9d;
}
.youzhi_lii {
    width: 24%;
    display: inline-block;
    box-sizing: border-box;
    padding: 12px 0;
    justify-content: center;
    background: #e5f2ff;
    cursor: pointer;
    text-align: center;
    margin-right: 10px;
    margin-bottom: 10px;
}
.youzhi_lii:nth-child(4n+4){
    margin-right: 0px;
}
.youshi_con {
    width:898px;
    margin: 30px 0px;
}
.clear {
    clear:both
}
.meng_con span {
    opacity: 0;
    padding-left:10px;
    display:inline-block;
    font-size:16px;
    padding-bottom:20px;
}
.meng_con {
    opacity: 0;
    position:absolute;
    bottom:0px;
    left: 0px;
    display: flex;
    align-items: flex-end;
    width:100%;
    height:100%;
    color:#fff;
    background: rgba(0, 0, 0, 0.3);
}
.li_box:hover .meng_con span {
    opacity: 1;
}
.li_box:hover .meng_con {
    opacity: 1;
}
.li_box:hover p {
    color: #068bf2;
}
.title p {
    height: 50px;
    line-height: 25px;
    margin: 10px 0;
    font-size: 16px;
    color: #000000;
}
.title {
    width:100%;
}
.img_box img {
    width: 100%;
    border-radius: 5px;
  height: 100%;
  object-fit: cover;
}
.img_box {
    position:relative;
    width:100%;
    height: 179px;
}
.li_box {
    display: inline-block;
    width: 286px;
    margin-right: 20px;
    margin-bottom: 15px;
}
.mianshi_li {
    width: 898px;
    height: auto;
    margin-top: 50px;
}
.biao_con h2 {
    font-size: 22px;
    text-align: center;
    font-weight: 500;
    color: #000;
}
.biao_con {
    width: 898px;
}
.xinwen_con {
    position: relative;
    width:1200px;
    margin: auto;
    background: pink;
    border-radius: 5px;
    padding: 50px 18px;
    background-color: #FFFFFF;
}
.banners {
    width: 100%;
    margin: 0 auto;
}
.current-location {
    height: 50px;
    line-height: 50px;
    color: #000000;
    padding: 0;
}
.current-location > p {
    font-size: 16px;
    color: #333;
}
.banners img {
    width:100%;
}
.width_main {
    width: 1200px !important;
    margin: 0 auto;
}
 @media (max-width: 1250px) {
     .width_main {
         width: 90%!important;
         margin: auto!important;
     }
     .xinwen_con {
         width: 90%;
     }
     .biao_con {
         width:70%;
     }
     .mianshi_li {
         width: 70%;
     }
     .youshi_con,.Introduction {
         width: 70%;
     }
 }
  @media (max-width: 1000px) {
      .xuanfu_con {
          position: inherit;
      }
      .biao_con {
          width: 100%;
      }
      .mianshi_li {
          width: 100%;
      }
      .li_box {
          width:calc((100% - 60px)/3);
      }
      .youshi_con,.Introduction {
          width: 100%;
      }
  }
@media (max-width: 800px){
  .youzhi_lii{
    width: 80%;
    margin-right:0px;
  }
  .youshi_con{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-wrap: wrap;
  }
  .li_box{
    width: 100%;
    margin: auto;
  }
  .Introduction{
    flex-direction: column;
    justify-content: center;
  }
  .Introduction_lefy{
    width: 95%;
    margin: 20px auto;
  }
  .Introduction_right{
    width: 95%;
    margin: auto;
    padding: 0!important;
  }
  .xuanfu_con{
    position: relative;
    margin: auto;
    width: 80%;
    background-size: cover!important;
  }
}
</style>
